<template>
    <div class="footer-settleIn">
        <div class="content-container">
            <div class="item-content">
                <span class="circle-outline">
                    <span class="circle-in"></span>
                </span>
                文案文案文案文案文案文案文案文案
            </div>
            <div class="item-content">
                <span class="circle-outline">
                    <span class="circle-in"></span>
                </span>
                文案文案文案文案文案文案文案文案
            </div>
            <div class="item-content">
                <span class="circle-outline">
                    <span class="circle-in"></span>
                </span>
                文案文案文案文案文案文案文案文案
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style lang="less" scoped>
   .footer-settleIn{
       background: url('./../../../assets/image/settleIn/footer-settleIn.png') center center no-repeat;
       background-size: cover;
       height: 100px;
       position: fixed;
       width: 100%;
       left: 0;
       bottom: 0;
       .content-container{
           position: absolute;
           width: 100%;
           text-align: center;
           left: 0;
           top:50%;
           transform: translateY(-50%);
       }
       .item-content{
           display: inline-block;
           font-size: 14px;
           color: #d4e6ff;
           margin-right: 80px;
           &:last-child{
               margin-right: 0;
           }
           .circle-outline{
               display: inline-block;
               width: 20px;
               height: 20px;
                background-color: rgba(139,187,255,0.29);
               border-radius: 50%;
               text-align: center;
               margin-right: 10px;
               .circle-in{
                   margin-top: 5px;
                   display: inline-block;
                   width: 10px;
                   height: 10px;
                   background: #8bbbff;
                   border-radius: 50%;
               }
           }
       }
   }
</style>
